<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/index.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all" />
</head>
<body>
	<fieldset class="layui-elem-field">
  	<legend>条件选择</legend>
 	 <div class="layui-field-box">
   		<form action="" class="layui-form layui-form-pane">
   			<div class="layui-form-item" align="center">
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">部门名称</label>
    			<div class="layui-input-inline">
      				 <input type="hidden" name="deptid" id ="deptid">
     				 <ul id="leftDtree" class="leftDtree" data-id="0"></ul>
    			</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">用户姓名</label>
    			<div class="layui-input-inline">
      				<input type="text" name="name"  placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
    			</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">用户地址</label>
    			<div class="layui-input-inline">
      				<input type="text" name="address"  placeholder="请输入用户地址" autocomplete="off" class="layui-input">
    			</div>
   			</div>
   			</div>
   			
   			<div class="layui-form-item" align="center">
   			<div class="layui-inline">
    			<div class="layui-input-inline">
      				 <button class="layui-btn" lay-submit="" lay-filter="search"  id="search"><span class="layui-icon layui-icon-search"></span>搜索</button>
      				 <button type="reset" id="reset" class="layui-btn layui-btn-primary"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
    			</div>
   			</div>	
   			</div>
   			
   		</form>
 	 </div>
</fieldset>
	<table id="user" lay-filter="user"></table>

<div>
	<div id="toolbar" style="display: none;">
		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add"><span class="layui-icon layui-icon-add-1" shiro:hasPermission="user:create"></span>添加用户</button>
	</div>
	<div id="rowBtn" style="display: none;">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="update"><span class="layui-icon layui-icon-edit" shiro:hasPermission="user:update"></span>修改</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><span class="layui-icon layui-icon-delete" shiro:hasPermission="user:delete"></span>删除</button>
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="resetPassword"><span class="layui-icon layui-icon-help" shiro:hasPermission="user:resetPwd"></span>重置密码</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="allotRole"><span class="layui-icon layui-icon-group" shiro:hasPermission="user:selectRole"></span>分配角色</button>
	</div>
</div>

<div style="display: none; padding: 20px" id="useradd" >
	<form action="" class = "layui-form-pane layui-form"  method="post" id="form"  lay-filter="form">
		<div class="layui-form-item">
		<div class="layui-inline">
    		<label class="layui-form-label">所属部门</label>
   			<div class="layui-input-inline">
   				 <input type="hidden" name="deptid" id ="pid" lay-verify="required">
     			 <ul id="deptDtree" class="deptDtree" data-id="0"></ul>
   			</div>
   		</div>
   		
   		<div class="layui-inline">
    		<label class="layui-form-label">排序码</label>
   			<div class="layui-input-inline">
   				<input type = "hidden"  name = id>
   				<input type="text" name="ordernum" id="ordernum" lay-verify="required" autocomplete="off" placeholder="请输入排序码" class="layui-input"> 
   			</div>
   		</div>
  		</div>
  		
  		<div class="layui-form-item">
		<div class="layui-inline">
    		<label class="layui-form-label">领导部门</label>
   			<div class="layui-input-inline">
     			 <ul id="leaderDtree" class="leaderDtree" data-id="0"></ul>
   			</div>
   		</div>
   		
   		<div class="layui-inline">
    		<label class="layui-form-label">领导名称</label>
   			<div class="layui-input-inline">
   				<select name ="mgr" id ="mgr">
   					<option value = "">请选择直属领导</option>
   				</select>
   			</div>
   		</div>
  		</div>
  		
  		<div class="layui-form-item">
		<div class="layui-inline">
    		<label class="layui-form-label">用户姓名</label>
   			<div class="layui-input-inline">
     			  <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" placeholder="请输入用户姓名" class="layui-input">
   			</div>
   		</div>
   		
   		<div class="layui-inline">
    		<label class="layui-form-label">登录账号</label>
   			<div class="layui-input-inline">
   				<input type="text" name="loginname" id="loginname" lay-verify="required" autocomplete="off" placeholder="请输入登录账号" class="layui-input">
   			</div>
   		</div>
  		</div>
  		
  		<div class="layui-form-item">
		    <label class="layui-form-label">用户地址</label>
		    <div class="layui-input-block">
		    	 <input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="请输入用户地址" class="layui-input">
		    </div>
 	   </div>
  		
  		<div class="layui-form-item">
		    <label class="layui-form-label">用户备注</label>
		    <div class="layui-input-block">
		    	 <textarea class="layui-textarea" name="remark" id="remark"></textarea>
		    </div>
 	   </div>
  		
 	   
 		<div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">用户性别</label>
	      <div class="layui-input-inline">
	        <input type="radio" name="sex" value="1" title="男" checked="">
	        <input type="radio" name="sex" value="0" title="女" >
	      </div>
	    </div>
	    
	    <div class="layui-inline">
	      <label class="layui-form-label">是否可用</label>
	      <div class="layui-input-inline">
	        <input type="radio" name="available" value="1" title="可用" checked="">
	        <input type="radio" name="available" value="0" title="不可用" >
	      </div>
	    </div>
	  </div>
 		
 		<div class="layui-form-item" >
    		<div class="layui-input-block" style="text-align: center;">
      			<button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit"><span class="layui-icon layui-icon-ok">提交</button>
     			<button type="reset"  class="layui-btn layui-btn-primary"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
    		</div>
  		</div> 
	</form>
</div>

<div style="display: none; padding: 10px" id = "selectRoleDiv">
	<table id="role" lay-filter="role"></table>
</div>

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
	var t;
	var selectTree;
	layui.extend({
	    dtree: '/resources/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
	  }).use(["jquery","layer","form","table","dtree"],function(){
		var $ = layui.jquery;
		var layer = layui.layer;	
		var form = layui.form;	
		var table = layui.table;
		var dtree = layui.dtree;
		
		$("#reset").click(function(){
			$("#deptid").val("");
		});
		
		$("#name").on("blur",function(){
			var name = $("#name").val();
			$.post("/sys/user/pinyin",{"name":name},function(rs){
				$("#loginname").val(rs.value)
			})
			
		})
		
		
		//table 初始化开始
		t = table.render({
			elem:"#user",
			page:true,
			url:"/sys/user/list",
			height: 'full-220',
			toolbar:"#toolbar",
			parseData:function(rs){
				if(rs.code != 200){
					layer.msg(rs.msg);
					return false;
				}
				 return {
				      "code": rs.code, //解析接口状态
				      "msg": rs.msg, //解析提示文本
				      "count": rs.data.count, //解析数据长度
				      "data": rs.data.data //解析数据列表
				    };
			},
			response:{
				statusCode: 200
			},
			done: function(res, curr, count){
			    //如果是异步请求数据方式，res即为你接口返回的信息。
			    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
			    console.log(res);
			    //得到当前页码
			    console.log(curr); 
			    //得到数据总量
			    console.log(count);
			    if(res.data.length == 0 && curr != 1){
			    	t.reload({
			    		page:{
			    			curr:curr - 1
			    		}
			    	});
			    }
			  },
			cols:[ [
				 {field: 'id', title: 'ID', sort: true,align:"center",width:"100"},
				 {field: 'name', title: '用户姓名', sort: true,align:"center",width:"100"},
			     {field: 'loginname', title: '登录账号',align:"center",width:"100"},
			     {field: 'imgpath', title: '用户照片',align:"center",width:"150"},
			     {field: 'sex', title: '用户性别',align:"center",width:"100"},
			     {field: 'deptname', title: '所属部门',align:"center",width:"100"},
			     {field: 'address', title: '用户地址',align:"center",width:"200"},
			     {field: 'leadername', title: '直属领导',align:"center",width:"100"},
			     {field: 'remark', title: '备注',align:"center",width:"150"},
			     {field: 'available', title: '是否有效',align:"center",templet:function(d){
			    	 return d.available==1?"<font color=blue>有效</font>":"<font color=red>无效</font>"
			     },width:"100"},
			     {field: 'ordernum', title: '排序数字',align:"center",width:"100"},
			     {field: 'hiredate', title: '创建时间',align:"center",width:"100"},
			     { title: '操作',toolbar:"#rowBtn",align:"center",width:"400",fixed:"right"}
			] ]
		});
		//table 初始化结束
		form.on("submit(search)",function(d){
			t.reload({
				where:d.field,
				page:{
					curr:1
				}
			});	
			return false;
		});
		//头监听事件开始
		table.on('toolbar(user)', function(obj){
			  var checkStatus = table.checkStatus(obj.config.id);
			  switch(obj.event){
			    case 'add':
			      add()
			    break;
			  };
		});
		//头监听事件结束
		
		//新增开始
		var layerIndex;
		var url;
		 function add(){
			layerIndex=layer.open({
				 	   type: 1, 
				 	   content: $('#useradd'),
				       title:"新增菜单",
				       area:['690px','550px'],
				       success: function(){
				    	   $("#form")[0].reset();
				    	   $("#deptid").val("");
				    	   url="/sys/user/getOrdernum";
				    		$.post(url,function(rs){
				    			console.log(rs);
				    			$("#ordernum").val(rs.value);
				    		});
				    		url="/sys/user/addUser"
					   }
			      });
		     };
		//新增结束
		
		//监听弹出层form表单提交 开始
		form.on("submit(dosubmit)",function(d){
			//对form表单进行序列化
			$.post(url,d.field,function(rs){
				if(rs.code == 200){
					t.reload();
				}
				layer.msg(rs.msg);
				layer.close(layerIndex);
			});
			return false;
		});
		//监听弹出层form表单提交 结束
		
		
		//行监听事件开始
		table.on('tool(user)', function(obj){ 
			var data = obj.data;
			switch(obj.event){
				case 'update':
					update(data);
				break;
				case 'delete':
					deleteOne(data);
				break;
				case 'resetPassword':
					resetPassword(data);
				break;
				case 'allotRole':
					allotRole(data);
				break;
			}
		});
		//行监听事件结束
		
		//跟新数据 开始
		function update(data){
			layerIndex = layer.open({
				   type: 1, 
			 	   content: $('#useradd'),
			 	   title:"修改用户",
			       area:['800px','600px'],
			       success: function(){
			    	  $("#form")[0].reset(); 
			    	  $("#deptid").val("");
			    	  dtree.dataInit("deptDtree", data.deptid);
			    	  dtree.setSelectValue("deptDtree");
			    	  var leaderId = data.mgr;
			    	  if(leaderId != null){
			    		  $.post("/sys/user/getUserById",{"id":leaderId},function(rs){
			    			  if(rs.code == 200){
			    				  dtree.dataInit("leaderDtree", rs.data.deptid);
						    	  dtree.setSelectValue("leaderDtree");
						    	  var deptId = rs.data.deptid
						    	  	//重新查该用户的领导部门的 用户   并选中该用户领导的ID
					     			$.post("/sys/user/getLeaderName",{"deptId":deptId},function(rs){
					     				if(rs.code==200){
					     					 var userData = rs.data
					     					$("#mgr").html("<option value = ''>请选择直属领导</option>")
					     					$.each(userData,function(index,value){
					     						$("#mgr").append("<option value ="+value.id+">"+value.name+"</option>");
					     					});
											 $("#mgr").val(leaderId)					     					
					     					 form.render("select");
					     				}
					     		});
			    			  }
			    		  });
			    	  };
			    	 	form.val("form",data);
			    	 	url="/sys/user/updateUser";
				  }
			});
		}
		
		//跟新数据 结束
		
		//删除单个数据 开始
		function deleteOne(data){
			var id = data.id;
				layer.confirm('是否删除该数据?', {icon: 3, title:'提示'}, function(index){
				$.post("/sys/user/deleteOne",{"id":id},function(rs){
					if(rs.code == 200){
						t.reload();
					}	
					layer.msg(rs.msg);
				});
					layer.close(index);
				});
			};
		//删除单个数据 结束
		
		//重置密码 原始密码为123456    开始
		function resetPassword(data){
			var id = data.id;
			layer.confirm('是否重置密码?', {icon: 3, title:'提示'}, function(index){
				$.post("/sys/user/resetPassword",{"id":id},function(rs){
					layer.msg(rs.msg);
				});
					layer.close(index);
				});
		}
		//重置密码 原始密码为123456    结束
		
		//初始化下拉框的树 开始
		selectTree = dtree.renderSelect({
				   elem: "#leftDtree",
				   width: "100%",
				   dataStyle: "layuiStyle",  //使用layui风格的数据格式
				   dataFormat: "list",  //配置data的风格为list
				   response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
				   url: "/sys/dept/dtree" // 使用url加载（可与data加载同时存在）
		});
		//初始化下拉框的树 结束
		
		// 给用户分配角色   开始
		function allotRole(data){
			layerIndex = layer.open({
				   type: 1, 
			 	   content: $('#selectRoleDiv'),
			 	   title:"分配角色",
			       area:['700px','500px'],
			       btn: ['<span class=layui-icon>&#xe605;确认</span>', '<span class=layui-icon>&#x1006;取消</span>'],
			       btnAlign: 'c',
			 	   yes: function(index, layero){
			 		   //获取复选框选中弄的值
			 		var checkStatus = table.checkStatus('role')
			 		var params = checkStatus.data;
			 		console.log(params); 
			 		//拼接数据   角色id 加上 权限的id;  在后台进行插入
			 		var dataParams = "uid="+data.id; 
			   		 $.each(params,function(index,value){
			   			dataParams+="&rid="+value.id;
			   		 	});
			   		console.log(dataParams); 
			   		 //保存权限
			   		$.post("/sys/user/insertRidUid",dataParams,function(rs){
			   			if(rs.code == 200){
			   				layer.msg(rs.msg)
			   				layer.close(layerIndex);
			   			}else{
			   				layer.msg(rs.msg)
			   			}
			   		})
			 		},
			  	   btn2: function(index, layero){
			   		 //按钮【按钮二】的回调
			    
			  		},
			       success: function(){
			    	   //初始化 角色列表
			    	   fun(data);
				  }
			});
		}
		
		//table 初始化开始
		function fun(data){
			t = table.render({
				elem:"#role",
				url:"/sys/user/initRole",
				where:{
					id:data.id
				},
				parseData:function(rs){
					if(rs.code != 200){
						layer.msg(rs.msg);
						return false;
					}
					 return {
					      "code": rs.code, //解析接口状态
					      "msg": rs.msg, //解析提示文本
					      "count": rs.data.count, //解析数据长度
					      "data": rs.data.data //解析数据列表
					    };
				},
				response:{
					statusCode: 200
				},
				cols:[ [
					 {type:"checkbox"},
					 {field: 'id', title: 'ID',align:"center"},
					 {field: 'name', title: '角色名称',align:"center"},
				     {field: 'remark', title: '角色备注',align:"center"}
				] ]
			});
			
		}
		//table 初始化结束
		
		// 给用户分配角色   结束
		
		
		//监听树的点击事件 给id赋值   开始
 		 dtree.on("node('leftDtree')" ,function(obj){
     			$("#deptid").val(obj.param.nodeId);
   			 });
		//监听树的点击事件 给id赋值   结束
		
		
		//初始化 用户所属部门    的树 结束
		dtree.renderSelect({
				   elem: "#deptDtree",
				   width: "100%",
				   dataStyle: "layuiStyle",  //使用layui风格的数据格式
				   dataFormat: "list",  //配置data的风格为list
				   response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
				   url: "/sys/dept/dtree" // 使用url加载（可与data加载同时存在）
		});
		//初始化  用户所属部门  的树 结束
		
		//监听  用户所属部门  的树 的点击事件 给pid赋值   开始
 		 dtree.on("node('deptDtree')" ,function(obj){
     			$("#pid").val(obj.param.nodeId);
   			 });
		//监听  用户所属部门  树的点击事件 给pid赋值   结束
		
		//初始化  用户直属领导部门  的树 结束
		dtree.renderSelect({
				   elem: "#leaderDtree",
				   width: "100%",
				   dataStyle: "layuiStyle",  //使用layui风格的数据格式
				   dataFormat: "list",  //配置data的风格为list
				   response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
				   url: "/sys/dept/dtree" // 使用url加载（可与data加载同时存在）
		});
		//初始化  用户直属领导部门  的树 结束
		
		//监听 用户直属领导部门  树的点击事件 给直属领导的下拉框增加选项   开始
 		 dtree.on("node('leaderDtree')" ,function(obj){
 				$("#mgr").html("<option value = ''>请选择直属领导</option>")
     			var deptId =  obj.param.nodeId;
     			$.post("/sys/user/getLeaderName",{"deptId":deptId},function(rs){
     				if(rs.code==200){
     					 var userData = rs.data
     					$.each(userData,function(index,value){
     						$("#mgr").append("<option value ="+value.id+">"+value.name+"</option>")
     					});
     					 form.render("select");
     				}
     			});
   			});
		//监听 用户直属领导部门 树的点击事件 给直属领导的下拉框增加选项   结束
	});
</script>
</body>
</html>
